<template>
	<div>
		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">查询条件</div>
			</div>
			<div class="smp_panel_body">
				<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="form">
					<el-row>
						<el-col :span="22">
							<el-col :span="6">
								<el-form-item label="交易码:">
									<el-input v-model="query.body.transCode" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="请求系统:">
									<el-select v-model="query.body.pubSysCode" style="width: 100%" filterable remote clearable
										reserve-keyword placeholder="请输入系统编号或名称" :remote-method="getsystems">
										<el-option v-for="item in systemList" :key="item.systemNo"
											:label="item.systemName" :value="item.systemNo">
											{{ item.systemName }}({{item.systemNo}})
											<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
									<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							<el-col :span="6">
								<el-form-item label="消费编码(P):">
									<el-input v-model="query.body.pubCode" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="关联需求:">
									<el-select v-model="query.body.associatedRequirement" style="width: 100%" clearable filterable
										remote clearable reserve-keyword placeholder="请输入需求编号或名称" :loading="qmsLoading"
										@change="getList" :remote-method="getRequirementList">
										<el-option v-for="item in requirelist" :key="item.qmsNo" :label="item.qmsNo"
											:value="item.qmsNo">
											<span style="float: left;margin-left: 3px;">{{ item.qmsNo }}</span>
											<span style="float: right;margin-right: 3px;">{{ item.qmsName }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="交易名称:">
									<el-input v-model="query.body.transName" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="服务系统:">
									<el-select v-model="query.body.regSysCode" style="width: 100%" filterable remote
										reserve-keyword clearable placeholder="请输入系统编号或名称" :remote-method="getsystems">
										<el-option v-for="item in systemList" :key="item.systemNo"
											:label="item.systemName" :value="item.systemNo">
											{{ item.systemName }}({{item.systemNo}})
											</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							
							
							<el-col :span="6">
								<el-form-item label="服务编码(R):">
									<el-input v-model="query.body.busCode" @keyup.enter.native="getList"></el-input>
								</el-form-item>
							</el-col>

							
							<el-col :span="6">
								<el-form-item label="调用状态:">
									<el-select @change="getList" v-model="query.body.status" style="width: 100%"
										placeholder="调用状态">

										<el-option v-for="item in dict('SMP0002')" :key="item.itemCode"
											:label="item.itemName" :value="item.itemCode">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-col>
						<el-col :span="2">
							<searchButtonGroup @search="onSubmit" @reset="reset"   />
						</el-col>

					</el-row>
				</el-form>
			</div>
		</div>

		<div class="smp-result smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">调用列表</div>
				
			</div>
			<div class="smp_panel_body">
				<div class="smp-panel_option">
					<el-button @click="exportSystemCall"  size="mini" type="primary" plain>
						<i class="el-icon-download"></i>
					导出
					</el-button>
					<el-button size="mini"   @click="exportAll" ><i
							class="el-icon-download"></i>全部导出</el-button>
				</div>
				<el-table :data="list" size="mini" stripe style="width: 100%" @selection-change="selectionChange">
					<el-table-column type="selection" label="" align="center" />
					<el-table-column prop="systemNo" label="请求系统" align="center" show-overflow-tooltip min-width="150">
						<template slot-scope="scope">
							{{scope.row.pubSysCode|getSystemName}}({{scope.row.pubSysCode}})
						</template>
					</el-table-column>
					<el-table-column prop="transCode" label="交易码" align="center" min-width="110">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="serviceView(scope.$index, scope.row)">{{scope.row.transCode}}</el-link>
					</template>
					</el-table-column>
					
					<el-table-column  show-overflow-tooltip  prop="transName" label="交易名称" align="center" min-width="110">
					</el-table-column>
					
					<el-table-column prop="systemNo" label="服务系统" align="center" show-overflow-tooltip min-width="150">
						<template slot-scope="scope">
							{{scope.row.regSysCode|getSystemName}}({{scope.row.regSysCode}})
						</template>
					</el-table-column>
					
					<el-table-column prop="pubCode" label="消费编码(P值)" align="center" min-width="110">
					</el-table-column>
					<el-table-column prop="busCode" label="服务编码(R值)" align="center" min-width="110">
					</el-table-column>
					
					<el-table-column prop="msgAgreement" label="请求方报文协议" align="center" min-width="110">
					</el-table-column>

					<el-table-column prop="msgCode" label="请求方报文编码" align="center" min-width="110">
						<template slot-scope="scope">
							{{scope.row.msgCode|dictName("SMP0004")}}
						</template>
					</el-table-column>
				
					
					<el-table-column prop="regMsgAgreement" label="服务方报文协议" align="center" min-width="110">
					</el-table-column>
					
					<el-table-column prop="regMsgCode" label="服务方报文编码" align="center" min-width="110">
						<template slot-scope="scope">
							{{scope.row.regMsgCode|dictName("SMP0004")}}
						</template>
					</el-table-column>
					<el-table-column show-overflow-tooltip prop="proxyPath" min-width="150" label="ESB测试URL"
						align="center">
					</el-table-column>

					<el-table-column show-overflow-tooltip prop="localPath" v-if="vaildPermission('SA0003')"
						min-width="150" label="核心路由" align="center">
					</el-table-column>


					<el-table-column show-overflow-tooltip prop="oesbLocalPath" v-if="vaildPermission('SA0003')"
						min-width="200" label="核心路由(外联)" align="center">
					</el-table-column>
					
					
					<el-table-column show-overflow-tooltip prop="esbBusPath" v-if="vaildPermission('SA0003')"
						min-width="150" label="业务路由" align="center">
					</el-table-column>
					
					
					<el-table-column show-overflow-tooltip prop="oesbBusPath" v-if="vaildPermission('SA0003')"
						min-width="200" label="业务路由(外联)" align="center">
					</el-table-column>
					

					<el-table-column show-overflow-tooltip prop="associatedRequirement" label="关联需求" align="center" min-width="150">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="requireMentListView(scope.$index, scope.row)">{{scope.row.associatedRequirement}}</el-link>
					</template>
					</el-table-column>
					
					<el-table-column  prop="status"
						label="状态" align="center">
						<template slot-scope="scope">
							{{scope.row.status|dictName("SMP0002")}}
						</template>
					</el-table-column>
					
					<el-table-column label="操作" align="center" width="120" fixed="right">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
								@click="handleService2Json(scope.row)">模拟报文测试</el-link>
							
						</template>
					</el-table-column>
					
					

				</el-table>
				<div class="smp-pagination" v-show="total>0">
					<el-pagination background size="mini" layout="total,sizes,prev, pager, next,jumper"
						:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total"
						:current-page="query.pageNum" @current-change="currentChange" @size-change="sizeChange">
					</el-pagination>

				</div>
			</div>
		</div>
		<xmlExample ref="xmlExample"></xmlExample>
	</div>
</template>

<script>
	"use strict";
	
	import xmlExample from './xmlExample.vue'
	import {
		selectSystemCallByPage,exportSystemCall,exportAllSystemCall
	} from '@/api/service.js';
	import {
		service2Json,service2Xml
	} from '@/api/serviceExample.js';
	
import {
		getRequirementInfoList
	} from '@/api/requirementInfo.js';

	export default {
		data() {
			return {
				selections:[],
				total: 0,

				list: [],
				requirelist:[],
				qmsLoading:false,
				query: {
					body: {
						associatedRequirement: '',
						pubSysCode: '',
						transCode: '',
						transName: '',
						regSysCode: '',
						pubCode: '',
						busCode: '',
						status: ''
					},
					pageNum: 1,
					pageSize: 5
				},

			};
		},
		
		components: {
			xmlExample
		},

		created() {
			Object.assign(this.query.body, this.$route.query);
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},

		methods: {
			
			
			exportAll() {
				if (this.list.length == 0) {
					this.$message({
						duration:5000,					type: 'warning',
						message: "未查询到任何调用关系！"
					});
					return;
				}
			
			
				exportAllSystemCall(this.query).then(res => {
			
					let name = "调用关系列表.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '调用关系列表.xlsx', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
			
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			
			selectionChange(val) {
				this.selections = val;
				//alert(JSON.stringify(val));
			},
			
			exportSystemCall() {
				if (this.selections.length == 0) {
					this.$message({
						duration:5000,						type: 'warning',
						message: "请选择要导出的调用关系！"
					});
					return;
				}
				const loading = this.$loading({
					lock: true,
					text: '数据处理中，请耐心等待',
					spinner: 'el-icon-loading'
				})
				exportSystemCall(this.selections).then(res => {
					loading.close();
					let name = "调用关系列表.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: "调用关系列表.xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
									
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},
			
			serviceView(index, row){
				this.$router.push({
					name: 'serviceDetails',
					query: {
						"busCode": row.busCode,
						"transCode": row.transCode,
						"systemNo": row.regSysCode
					}
				})
			},
			
			requireMentListView(index, row){
				this.$router.push({
					name: 'requirementDetails',
					query: {
						"qmsNo": row.associatedRequirement,
						"batchNum": row.batchNum
					}
				})
			},
			

			/**
			 * 获取需求列表
			 */
			getRequirementList(query) {
			
				if (query != '') {
					this.qmsLoading = true;
					getRequirementInfoList({
						query: query
					}).then(response => {
						this.requirelist = response.data.extend;
						this.qmsLoading = false;
					});
				}
			},
			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},
			refresh() {
				this.getList();
			},
			reset(form) {
				this.query.body = {}
			},

			getList() {
				const loading = this.$loading({
					lock: true,
					text: '资源加载中，请稍后',
					spinner: 'el-icon-loading'
				})
				selectSystemCallByPage(this.query).then(response => {
					loading.close();
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					})
				}).catch(error => {
					loading.close();
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},
			
			handleService2Json(row){
				
				if(row.msgAgreement=='http/json'||row.msgAgreement=='https/json'){
						this.$router.push({
							name: 'httpTrans',
							query: Object.assign(row)
						})
						
			
				}else if(row.msgAgreement=='socket/xml'){
					this.$router.push({
						name: 'transUtil',
						query: Object.assign(row)
					})
				} else{
					this.$message({
						duration:5000,						
						type: 'info',
						message: "适配中...！"
					});
				}
			}
		}
	}
</script>

<style>
</style>
